<template>
  <div class="app-page app-search">
    <!-- 搜索头部 -->
    <search-header v-model="searchValue"></search-header>
    <!-- 历史搜索和热门搜索 -->
    <search-history v-if="!searchValue.length" @updateSearch="handleUpdateSearch"></search-history>
  </div>
</template>
<script>
import SearchHeader from './components/SearchHeader'
import SearchHistory from './components/SearchHistory'
export default {
  name: 'AppSearch',
  data () {
    return {
      // search父组件中搜索框内容数据,用它来控制界面到底展示历史数据还是搜索关键字查询
      searchValue: ''
    }
  },
  components: {
    SearchHeader,
    SearchHistory
  },
  methods: {
    handleUpdateSearch (val) {
      this.searchValue = val
    }
  }
}
</script>
<style lang="scss" scoped>
.app-search {
  /*  */
}
</style>
